<template>
  <div id="playpage">
    <div class="play_top">
      <div class="lunpan" :class="$store.state.playPause ? 'active' : ''">
        <div class="song_pic">
          <img :src="song_info.song_pic" />
        </div>
      </div>
      <div
        class="tie"
        :style="{ transform: $store.state.playPause ? 'rotateZ(0deg)' : '' }"
      >
        <img src="../assets/playimg2.png" />
      </div>
      <div class="close" @click="$emit('close')">
        <span class="iconfont icon-xiala"></span>
      </div>
    </div>
    <div class="play_mid">
      <div class="songname">
        {{ song_artists | singer }} -
        {{ song_info.song_name }}
      </div>
      <div class="lyric">
        <div
          class="lyric-box"
          :style="'transform:translateY(-' + (offset_idx * 24 - 48) + 'px)'"
        >
          <div
            v-for="(el, idx) in songlyric"
            :key="idx"
            :class="idx == offset_idx ? 'lyric_active' : ''"
          >
            {{ el }}
          </div>
        </div>
      </div>
    </div>
    <div class="play_bottom">
      <div class="progress">
        <div class="currentTime">
          {{ audio_info.audio_currentTime | timeFilter }}
        </div>
        <van-slider
          v-model="value"
          :max="audio_info.audio_duration"
          bar-height="5px"
          active-color="#ee0a24"
          @drag-start="is_drag = true"
          @drag-end="is_drag = false"
          @change="changeProgress"
        />
        <div class="duration">{{ audio_info.audio_duration | timeFilter }}</div>
      </div>
      <div class="controls">
        <span
          class="iconfont icon-shangyishou"
          @click.stop="$emit('prev')"
        ></span>

        <div @click="changeState">
          <span
            class="iconfont icon-bofang"
            v-if="!$store.state.playPause"
          ></span>
          <span class="iconfont icon-ziyuan" v-else></span>
        </div>

        <span
          class="iconfont icon-xiayishou"
          @click.stop="$emit('next')"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      //是否处于拖动
      is_drag: false,
      value: 0,
      offset_idx: 0,
    };
  },
  computed: {
    ...mapState([
      "song_info",
      "audio_info",
      "songlyric",
      "songlyric_currentTime",
    ]),
    song_artists() {
      if (this.$store.state.song_info.song_artists) {
        return this.song_info.song_artists;
      } else {
        return [];
      }
    },
  },
  watch: {
    audio_info: {
      handler(newval) {
        if (!this.is_drag) {
          this.value = newval.audio_currentTime;
          if (
            this.songlyric_currentTime.indexOf(newval.audio_currentTime) != -1
          ) {
            let newidx = this.songlyric_currentTime.indexOf(
              newval.audio_currentTime,
            );
            this.offset_idx = newidx;
          }
        }
      },
      immediate: true,
    },
  },
  filters: {
    timeFilter(el) {
      let min = parseInt(el / 60);
      let second = parseInt(el % 60)
        .toString()
        .padStart(2, "0");
      return min + ":" + second;
    },
  },
  methods: {
    close() {
      this.$router.go(-1);
    },
    changeState() {
      if (!this.$store.state.playPause) {
        this.$audio.play();
        this.$store.commit("changeplayPause");
      } else {
        this.$audio.pause();
        this.$store.commit("changeplayPause");
      }
    },
    changeProgress(val) {
      // 点击滚动条切换相应时间，并且播放
      this.$audio.currentTime = val;
      this.$store.commit("changeState", true);
      let new_arr = this.songlyric_currentTime.map((el) => {
        return Math.abs(el - val);
      });
      let min = Math.min(...new_arr);
      let newidx = new_arr.findIndex((el) => {
        return el == min;
      });
      this.offset_idx = newidx;
    },
  },
};
</script>

<style lang="scss" scoped>
#playpage {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: repeating-linear-gradient(45deg, skyblue, #ccc 47%, red 100%);
  .play_top {
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    .lunpan {
      width: 100%;
      position: absolute;
      top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 250px;
      height: 250px;
      box-sizing: border-box;
      border: 1px solid black;
      border-radius: 50%;
      overflow: hidden;
      background-image: url(../assets/playimg1.png);
      background-position: center;
      background-repeat: no-repeat;
      animation: rotate 10s linear infinite;
      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      //动画默认暂停
      animation-play-state: paused;
      .song_pic {
        width: 60%;
        height: 60%;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .active {
      //动画启动
      animation-play-state: running;
    }
    .tie {
      position: absolute;
      left: 50%;
      width: 80px;
      transform: rotateZ(-20deg);
      transform-origin: left top;
      transition: all 1s;
      img {
        width: 100%;
      }
    }
    .close {
      position: absolute;
      top: 0;
      left: 5%;
      span {
        font-size: 30px;
        color: gray;
      }
    }
  }
  .play_mid {
    flex-grow: 1;
    height: 30vh;
    .songname {
      height: 20%;
      color: white;
      text-shadow: 1px 1px 2px rgb(95, 63, 63);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lyric {
      height: 144px;
      overflow: hidden;
      .lyric-box {
        transition: all 0.3s;
        div {
          margin: 0 auto;
          height: 24px;
          line-height: 24px;
          width: 80vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .lyric_active {
          transform: scale(1.2);
          transition: all 0.3s;
          color: white;
        }
      }
    }
  }
  .play_bottom {
    height: 20vh;
    width: 100%;
    // background-color: skyblue;
    display: flex;
    flex-direction: column;
    .progress {
      height: 40%;
      display: flex;
      align-items: center;
      color: white;
      .currentTime {
        padding: 0 2vw;
        width: 15%;
      }
      .duration {
        padding: 0 2vw;
        width: 15%;
      }
    }
    .controls {
      height: 60%;
      width: 80%;
      margin: 0 auto;
      text-align: center;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 50px;
      }
    }
  }
}
</style>
